myapp.views.MuseumDetail = Ext.extend(Ext.Panel, {
    dockedItems: [{
        xtype: 'toolbar',
        title: 'View museum',
        items: [
            {
                text: 'Back',
                ui: 'back',
                listeners: {
                    'tap': function () {
                        Ext.dispatch({
                            controller: myapp.controllers.museums,
                            action: 'index',
                            animation: { type: 'slide', direction: 'right' }
                        });
                    }
                }
            },
            { xtype: 'spacer' },
            {
                id: 'edit',
                text: 'Edit',
                ui: 'action',
                listeners: {
                    'tap': function () {
                        //Ext.dispatch({
                        //    controller: app.controllers.contacts,
                        //    action: 'edit',
                        //    id: this.record.getId()
                        //});
                    	//alert('this.record.getId: ' + this.record.getId());
                        Ext.dispatch({
                            controller: myapp.controllers.museums,
                            action: 'showDetailMap',
                            id: myapp.views.museumDetail.record.getId()
                            //id: this.record.getId()
                        });
                    }
                }
            }
        ]
    }],
    styleHtmlContent: true,
    scroll: 'vertical',
    height: '100%', // disabling this has no effect in chrome, but breaks page scrolling on android 
    updateWithRecord: function (record) {
        Ext.each(this.items.items, function (item) {
            item.update(record.data);
        });
    	//alert('update!');
        checkConnection();
        var toolbar = this.getDockedItems()[0];
        // this will set the detail page title to the 
        // name of the museum -- which may be too long to display
        //toolbar.setTitle(record.get('name'));
        toolbar.getComponent('edit').record = record;
        // set the record of this view so other things can access it (eg click handler on 
        // view map button)
        this.record = record;
        //myapp.views.MuseumDetail.doLayout();        
    },
    items: [
        {  	xtype: 'panel',
        	tpl: [
            '<h1>{museumName}</h1>',
        	'<div class="x-clear"></div>'
        	]
        },
        {
        	xtype: 'panel',
        	bodyBorder: 4,
        	tpl: [
        	    '<div class="contactInfo">',
  	       		'  <h2>Contact</h2>',
  	       		'  <img src="assets/images/icon-telephone.gif"/>',
	       		'  <a href="tel:{telephone}">{telephone}</a>',
                '  <div id="address">{address}</div>',
                '</div>'
                ],
            id: 'address',
            listeners: {
                click: {
                    element: 'el', //bind to the underlying el property on the panel
                    fn: function(event, target){ 
                    	console.log('click address element');
                    	if(target.id == 'address'){//only do if user has clicked on address div
	                        Ext.dispatch({
	                            controller: myapp.controllers.museums,
	                            action: 'showDetailMap',
	                            id: myapp.views.museumDetail.record.getId()
	                        });
                        };
                	}
                },
                dblclick: {
		            element: 'body', //bind to the underlying body property on the panel
		            fn: function(){ console.log('dblclick body'); }
		        }
            }
        },
        {  	xtype: 'panel',
        	tpl: [
            //'<tpl if="image == \'\'">NOIMAGE {museumName}</tpl>'
        	'<tpl if="image != \'\'">',
        		'<div class="imageContainer"><img src="{image}" class="museumImage" /></div>',
        	'</tpl>',
        	'<tpl if="description != \'\'">',
        		'<p>{description}</p>',
        	'</tpl>',
           	'<tpl if="hoursOfOperation != \'\'">',
           		'<h2>Hours of Operation</h2>',
           		'{hoursOfOperation}',
        	'</tpl>',
        	'<hr />',
        	'<div class="x-clear"></div>'
        	]
        },
        {
        	xtype: 'button',
            ui: 'action',
            text: 'Show on Map',
            listeners: {
                'tap': function () {
                    Ext.dispatch({
                        controller: myapp.controllers.museums,
                        action: 'showDetailMap',
                        id: myapp.views.museumDetail.record.getId()
                    });
                }
            }
        },

    ]
});